<template>
  <div style="height: 98vh">
    <el-row
      style="background-color: aqua; width: 100%; height: 100%; display: flex"
    >
      <el-col :span="6">
        <el-card shadow="hover" style="display: flex;flex-direction: column;align-items: center;">
          <img
            :src="chargingStations.image"
            style="width: 150px; height: 150px; border-radius: 50%"
          />
          <p>{{ chargingStations.name }}</p>
          <p>地址：{{ chargingStations.address }}</p>
        </el-card>
        <div style="width: 100%; display: flex;justify-content: space-around">
          <el-button plain v-for="(item, index) in chargeType" :key="index" @click="queryList(item.name)" :class="{ 'is-selected': selectedChargeType === item.value }" style="width: 112px;height: 40px;">
            {{ item.name }}
          </el-button>
        </div>
        <div class="tjcharge-container">
           <div class="tjcharge" v-for="(item, index)  in chargeTypeNum" :key="index">
            <p><span style="font-size: 30px;">{{item.num}}</span>台</p>
            <p>{{ item.type }}</p>
           </div>
        </div>
      </el-col>
      <el-col :span="18"> 2 </el-col>
    </el-row>
    <!-- 弹出框 -->
    <el-dialog
      title="请选择充电站位置"
      :visible.sync="centerDialogVisible"
      width="100%"
      :fullscreen="true"
      center
    >
      <!-- 下拉列表 -->
      <div style="width: 100%; display: flex; justify-content: center">
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      chargeTypeNum: [],
      selectedChargeType: '汽车',// 默认选中“汽车”
      chargeType: [
        { name: '汽车', value: '汽车' },
        { name: '电瓶车', value: '电瓶车' },
        { name: '大型公交车', value: '大型公交车' }
      ],
      options: [],
      value: "",
      centerDialogVisible: false,
      chargingStations: {},
    };
  },
  methods: {
    queryList(item) {
      this.selectedChargeType = item.value; // 更新选中的值
      axios
        .get("/bdc/bdc/queryChargeTypeNum", {
          params: {
            type: item
          }
        })
        .then((res) => {
          this.chargeTypeNum = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 查询所有充电站的所在位置
    getAllChargingStation() {
      axios.get("/bdc/bdc/changeLocation")
        .then((res) => {
          this.options = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 查询对应充电站的名称、地址、图片
    queding() {
      if (this.value === '') {
        this.$message.error("请选择充电站");
      } else {
        axios.get("/bdc/bdc/changeNameAndAddress", {
          params: {
            name: this.value
          }
        })
          .then((res) => {
            this.chargingStations = res.data;
            this.centerDialogVisible = false;
          })
          .catch((error) => {
            console.log(error);
          });
      }
    }
  },
  created() {
    this.centerDialogVisible = true;
    this.getAllChargingStation();
    this.queryList({ value: '汽车' }); // 默认选中“汽车”
  },
};
</script>

<style scoped>
.left-container {
  width: 100%;
  height: 100%;
}
.tjcharge{
  height: 100px;
  background-color:cornflowerblue;
  padding: 20px;
}
.tjcharge-container{
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
}
</style>